<template>
    <view>
        <!-- pages/order/order.wxml -->
        <view class="bar">
            <view @tap="onBarItemTap" :data-index="index" :class="activeIndex === index ? 'active' : ''" v-for="(item, index) in [0, 1, 2, 3]" :key="index">
                {{ ['全部', '待付款', '代发货', '退款/退货'][index] }}
            </view>
        </view>
        <view class="orders">
            <block v-for="(item, index) in orders" :key="index">
                <view class="order-item">
                    <view>
                        <text class="ordr-info">订单号:</text>
                        <text style="color: gray">{{ item.orderNumber }}</text>
                    </view>
                    <view>
                        <text class="ordr-info">订单价格：</text>
                        <text style="color: red">{{ item.orderPrice }}</text>
                    </view>
                    <view>
                        <text class="ordr-info">订单生成时间:</text>
                        <text>{{ item.orderTime }}</text>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
// pages/order/order.js
export default {
    data() {
        return {
            orders: [],
            activeIndex: 0
        };
    },
    onLoad: function () {
        const orders = uni.getStorageSync('orders') || [];
        this.setData({
            orders: orders
        });
    },
    methods: {
        onBarItemTap: function (e) {
            const index = e.currentTarget.dataset.index;
            this.setData({
                activeIndex: index
            });
        }
    }
};
</script>
<style>
/* pages/order/order.wxss */
.bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 80rpx;
    background-color: white;
    border-bottom: 2rpx solid grey;
}

.bar view {
    line-height: 80rpx;
    cursor: pointer;
    height: 80rpx;
}

.bar view.active {
    color: red;
    border-bottom: 2rpx solid red;
}
.order-item {
    display: flex;
    flex-direction: column;
    border-bottom: 2rpx solid gray;
    font-size: larger;
    padding: 15rpx;
}
.order-item view {
    display: flex;
    justify-content: space-between;
}
.ordr-info {
    color: gray;
}
</style>
